// 用事件代理就先获取最大的盒子
let box = document.querySelector(".box")
    //然后找ul
let imgBoxUl = box.querySelector(".img_box > ul");
let dotBox = box.querySelector(".dot_box")
    // console.log(imgBoxUl);//获取ul节点包括里面的li
    // console.log(ajax);
ajax("GET", "http://studentback.dfbuff.xyz/getMethod", function(res) {
    console.log(res);

    res.result.forEach(function(item, idx) {
        imgBoxUl.innerHTML += `<li><a href="javascript:void(0)"><img src="${item.content}"></a></li>`;

        dotBox.innerHTML += `<span class="dot${idx==0?'dotActive':''}" data-index=${idx+1}></span>`

    });

    //将第一张图片插入最后面
    imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true).cloneNode(true));
    //将最后一张图片插入第一张前面
    imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild)
        // console.log(imgBoxUl.children.length);
        //事件委托，给父元素盒子设置事件
    let index = 1;
    let lastIndex = 1;
    imgBoxUl.style.transform = `translateX(-${index}00%)`; //当index=1时，图片在-100%的位置

    //事件代理
    box.addEventListener("click", function(event) {
        //当点击右箭头的时候，图片移动
        if (event.target.className == "arrow_right") {
            arrowRfn(event); //为什么这里可以event.target
        }
        //当点击左箭头的时候，图片移动
        if (event.target.className == "arrow_left") {
            arrowLfn(event); //这里event.target却要报错
        }
        //当点击小圆点的时候，图片移动
        if (event.target.classList.contains("dot")) {
            dotfn(event);
        }

    })

    //右点击事件
    function arrowRfn(e) {
        // console.log(e);
        // console.log(e.target);
        index++;
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        //当index=5的时候，让它直接跳转到第一张，但是不能有过渡动画，然后下一次点击的时候就是第二张
        if (index == 5) {
            console.log(index);
            index = 1;
            limit();
        }

        let dotR = e.target.parentElement.nextElementSibling.children[index - 1];
        // console.log(dotR);
        dotColor(dotR)
    }

    //临界值
    function limit() {

        //设置一个监听事件，监听动画结束之后，应该要做什么
        imgBoxUl.addEventListener("transitionend", function() {
            //当最后一张的动画效果结束之后，清除动画。目的：为了不让返回第一张的时候，呈现动画效果
            imgBoxUl.style.transition = "none";
            // 让图片返回第一张，-100%的位置
            imgBoxUl.style.transform = `translateX(-${index*100}%)`;

            //当回到第一张之后，恢复动画值
            window.getComputedStyle(imgBoxUl, "style").transition; //获取transition的最终值，只有获取了这个值之后，
            //在下面再设置transition才不会覆盖上面的值。
            console.log(window.getComputedStyle(imgBoxUl, "style").transition);
            console.log(imgBoxUl.style.transition);
            imgBoxUl.style.transition = "0.2s ease-in-out";
        })

    }

    //左点击事件
    function arrowLfn(e) {
        // console.log(e);
        // console.log(e.target);
        index--;
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        if (index == 0) {
            index = 4;
            limit();
        }
        let dotL = e.target.parentElement.nextElementSibling.children[index - 1];
        // console.log(dotL);
        // console.log(e);
        dotColor(dotL)
    }

    //小圆点事件
    function dotfn(e) {
        // console.log(e)
        // let dataIndex = e.target.getAttribute("data-index");
        let dataIndex = e.target.dataset.index
            // console.log(dataIndex);
        index = dataIndex;
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        dotColor(e)
    }

    //小圆点颜色
    function dotColor(e) {
        // console.log(e.target);
        e.parentElement.children[lastIndex - 1].classList.remove("dotActive");
        // console.log(e.target.parentElement[0]);
        e.classList.add("dotActive");
        lastIndex = index;
    }
    // let timer;
    // timeFn();

    // function timeFn() {
    //     if (timer) {
    //         clearInterval(timer);
    //     }
    //     timer = setInterval(function() {
    //         // arrowLfn(imgBoxUl);
    //         arrowRfn(imgBoxUl);
    //     }, 1000);
    // }
}, {
    "type": "图片"
});

// //动态生成图片（第一张和最后一张,那么就要获取第一张和最后一张）
// // console.log(imgBoxUl.firstElementChild.cloneNode(true));//打印第一张
// // console.log(imgBoxUl.lastElementChild.cloneNode(true));//打印最后一张
// // console.log(imgBoxUl.children);

// //将第一张图片插入最后面
// imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true).cloneNode(true));
// //将最后一张图片插入第一张前面
// imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild)
// // console.log(imgBoxUl.children.length);
// //事件委托，给父元素盒子设置事件
// let index = 1;
// let lastIndex = 1;
// imgBoxUl.style.transform = `translateX(-${index}00%)`;//当index=1时，图片在-100%的位置

// //事件代理
// box.addEventListener("click",function(event) {
//   //当点击右箭头的时候，图片移动
//   if(event.target.className == "arrow_right") {
//     arrowRfn(event);//为什么这里可以event.target
//   }
//   //当点击左箭头的时候，图片移动
//   if(event.target.className == "arrow_left") {
//     arrowLfn(event);//这里event.target却要报错
//   }
//   //当点击小圆点的时候，图片移动
//   if(event.target.classList.contains("dot")) {
//     dotfn(event);
//   }

// })

// //右点击事件
// function arrowRfn(e) {
//   // console.log(e);
//   // console.log(e.target);
//   index++;
//   imgBoxUl.style.transform = `translateX(-${index}00%)`;
//   //当index=5的时候，让它直接跳转到第一张，但是不能有过渡动画，然后下一次点击的时候就是第二张
//   if(index == 5) {
//     console.log(index);
//     index=1;
//     limit();
//   }

//   let dotR = e.target.parentElement.nextElementSibling.children[index - 1];
//   // console.log(dotR);
//   dotColor(dotR)
// }

//临界值
// function limit() {

//     //设置一个监听事件，监听动画结束之后，应该要做什么
//     imgBoxUl.addEventListener("transitionend", function() {
//         //当最后一张的动画效果结束之后，清除动画。目的：为了不让返回第一张的时候，呈现动画效果
//         imgBoxUl.style.transition = "none";
//         // 让图片返回第一张，-100%的位置
//         imgBoxUl.style.transform = `translateX(-${index*100}%)`;

//         //当回到第一张之后，恢复动画值
//         window.getComputedStyle(imgBoxUl, "style").transition; //获取transition的最终值，只有获取了这个值之后，
//         //在下面再设置transition才不会覆盖上面的值。
//         console.log(window.getComputedStyle(imgBoxUl, "style").transition);
//         console.log(imgBoxUl.style.transition);
//         imgBoxUl.style.transition = "0.2s ease-in-out";
//     })

// }

// //左点击事件
// function arrowLfn(e) {
//     // console.log(e);
//     // console.log(e.target);
//     index--;
//     imgBoxUl.style.transform = `translateX(-${index}00%)`;
//     if (index == 0) {
//         index = 4;
//         limit();
//     }
//     let dotL = e.target.parentElement.nextElementSibling.children[index - 1];
//     // console.log(dotL);
//     // console.log(e);
//     dotColor(dotL)
// }

// //小圆点事件
// function dotfn(e) {
//     // console.log(e)
//     // let dataIndex = e.target.getAttribute("data-index");
//     let dataIndex = e.target.dataset.index
//         // console.log(dataIndex);
//     index = dataIndex;
//     imgBoxUl.style.transform = `translateX(-${index}00%)`;
//     dotColor(e)
// }

// //小圆点颜色
// function dotColor(e) {
//     // console.log(e.target);
//     e.parentElement.children[lastIndex - 1].classList.remove("dotActive");
//     // console.log(e.target.parentElement[0]);
//     e.classList.add("dotActive");
//     lastIndex = index;
// }
// let timer;
// timeFn();

// function timeFn() {
//     if (timer) {
//         clearInterval(timer);
//     }
//     timer = setInterval(function() {
//         // arrowLfn(imgBoxUl);
//         arrowRfn(imgBoxUl);
//     }, 1000);
// }